<template>
  <el-dialog
          model-value="dialogVisible"
          title="资产设备维修详情"
          align-center
          width="30%"
          @close="handleClose"
  >
    <div v-for="(item, index) in tableData" :key="index">
      <div class="box">
        <div class="content1">{{ item.name }}</div>
        <div class="content2">{{ item.data === "" ? "待完善" : item.data }}</div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineEmits, ref, watch } from "vue";
import request from "@/util/request";
import moment from "moment";

const tableData = ref([])

/**
 *对话框属性初始化
 */
const props = defineProps(
        {
          id: {
            type: Number,
            default: -1,
            required: true
          },
          dialogVisible: {
            type: Boolean,
            default: false,
            required: true
          }
        }
)

/**
 * 监听属性的变化
 */
watch(
        () => props.dialogVisible,
        (value) => {
          if (value === true) {
            console.log(value)
            getAssetFixById(props.id)
          }
        }
)

/**
 * 向父组件抛方法
 */
const emits = defineEmits(['update:modelValue'])

/**
 * 手动关闭对话框
 */
const handleClose = () => {
  emits('update:modelValue', false);//关闭dialog
}

const names = {
  lsh: "维修流水号",
  tbrq: "填报日期",
  zcbh: "资产编号",
  zcmc: "资产名称",
  shsl: "损坏数量",
  gzyy: "故障原因",
  sxrq: "送修日期",
  isScrapped: "是否损坏",
  wxzk: "维修状况",
  wxfy: "维修费用",
}

const getAssetFixById = async (id) => {
  const res = await request.post("assetFix/" + id);
  console.log(res.data.assetFix)
  let obj = res.data.assetFix;
  tableData.value = []
  for (let key in obj) {
    if (key === "id" || key === "assetid" || key === "asset") {
      continue;
    }
    const name = names[key];
    if (key === "tbrq" || key === "sxrq") {
      let value = moment(obj[key]).format("YYYY-MM-DD");
      tableData.value.push({name: name, data: value})
    } else {
      tableData.value.push({name: name, data: obj[key]})
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  border-left: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;

  .content1 {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    color: #333;
    font-size: 14px;
  }

  .content2 {
    width: 100%;
    line-height: 40px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    background-color: #fff;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    color: #737373;
    font-size: 14px;
  }
}
</style>

